<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>

<body>

    <div class="box">
        <ul>
            <li @click="clickRed(index)" v-for="(i,index) in msg" :class="{red:isRedIndex === index}">{{index+'--->'+i}}</li>
        </ul>
    </div>

</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    //    vue实现
    new Vue({
        el: '.box',
        data: {
            msg: ['浏览', '查看', '学习', '游戏'],
            isRedIndex: 0,
        },
        methods: {
            clickRed: function(index) {
                this.isRedIndex = index;
            },
        }
    });

    // var li = document.getElementsByTagName('li');
    //传统
    /*  for (let i = 0; i < li.length; i++) {
         li[i].onclick = function() {
             for (let i = 0; i < li.length; i++) {
                 li[i].style.background = '';
             }
             li[i].style.background = 'red';
         }
     } */

    /* for (var i = 0; i < li.length; i++) {
        li[i].onclick = (function(index) {
            return function() {
                alert(index);
            }
        })(i);
    }
 */
    //事件委托
    /*    var ul = document.getElementsByTagName('ul');
       ul[0].addEventListener('click', function(e) {
           for (let i = 0; i < li.length; i++) {
               li[i].style.background = '';
           }
           e.target.style.background = 'red';
       }) */
</script>

</html>